<template>
  <el-dialog
    v-model="modelValue"
    :title="initValue ? '更新渠道' : '新增渠道'"
    width="800px"
    @close="close"
  >
    <el-form ref="form" :model="formData" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="渠道名" prop="name">
            <el-input v-model="formData.name"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="业务类型" prop="type">
            <el-input v-model="formData.type"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="资源平台" prop="platform">
            <el-input v-model="formData.platform"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="合作政策" prop="policy">
            <el-input v-model="formData.policy"></el-input> </el-form-item
        ></el-col>

        <el-col :span="12">
          <el-form-item label="有无框架" prop="frame">
            <el-radio-group v-model="formData.frame">
              <el-radio :label="false">无</el-radio>
              <el-radio :label="true">有</el-radio>
            </el-radio-group>
          </el-form-item></el-col
        >
        <template v-if="formData.frame" prop="contract">
          <el-col :span="12">
            <el-form-item label="合同附件">
              <el-upload :auto-upload="false" action="" :limit="1">
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="合同时效" prop="time">
              <el-date-picker v-model="formData.time" type="date">
              </el-date-picker> </el-form-item
          ></el-col>
        </template>

        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="渠道维护人" prop="maintenanceMan">
            <el-input
              v-model="formData.maintenanceMan"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="close">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch, toRefs, nextTick } from "vue";
import type { ElForm } from "element-plus";

export type Channel = {
  name: string;
  type: string;
  platform: string;
  policy: string;
  frame: boolean;
  contract: string;
  time: string;
  remark: string;
  maintenanceMan: string;
};
const props = defineProps<{
  modelValue: boolean;
  initValue?: Channel;
}>();
const emit = defineEmits(["update:modelValue"]);
const form = ref<InstanceType<typeof ElForm>>();
const formData = ref<Channel>({
  name: "",
  type: "",
  platform: "",
  policy: "",
  frame: false,
  contract: "",
  time: "",
  remark: "",
  maintenanceMan: "",
});
const { modelValue, initValue } = toRefs(props);
watch(modelValue, (modelValue, prev) => {
  if (modelValue && initValue?.value) {
    const newData={ ...initValue.value }
    nextTick(() => {
      formData.value = newData;
    });
  }
});
const close = () => {
  emit("update:modelValue", false);
  form.value?.resetFields();
};
</script>
